 <template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <p>局部计算属性:{{ localComputed }}</p>
      <p>映射取值count: [{{ count }}]</p>
      <p>映射取值name: [{{ name }}]</p>
      <p>函数映射取值: [{{ countComputed }}]</p>
    </div>
  </div>
</template> 

<script>
import { mapState } from "vuex";
export default {
  name: "Test4",
  props: {
    msg: String,
  },
  data() {
    return {
      temp: "hello:this is localComputed",
      tempCount: 1,
    };
  },
  computed: {
    //局部计算属性
    localComputed() {
      return this.tempCount + 10;
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      count: (state) => state.count,
      name: (state) => state.name,
      countComputed: function (state) {
        return this.tempCount + state.count;
      },
    }),
  },
};
</script>
